/**
 * @author zhangqiang
 * @date   16/12/26
 */

import {
    prefix
} from "../const/prefix";

import Select from "../components/form/Select.js"
import DatePicker from "../components/form/TimePicker";
import NoData from "../components/NoData.js"

(function (lf, r) {
    var RC = r.createClass,
        imgs = '',
        selectPhoto = lf.bridgeJs.selectPhoto,
        $form = $('form'),
        appointmentTime = $form.find('#appointmentTime').val() + ':00',//后台需要加秒来转换为date类型
        ajax = lf.utils.ajax;

    const TEXT = 'text', CHOOSE = 'choose', TIME = 'time';

    var ChooseInput = RC({
        render: function () {
            var info = this.props.info;
            return (
                <div>
                    <div className="mui-input-row">
                        <label>{info.title}</label>
                        <Select addClass="select-input" ref='select' value={info.val} name={info.name}
                                groupCode={info.code}/>
                    </div>
                </div>
            )
        }
    });

    var Hours = RC({
        render:function(){
            return(
                <div>
                    <div className="mui-input-row">
                        <label>营业时间</label>
                        <DatePicker {...{
                            value: lf.utils.format(), name: "appointmentTime",placeholder:'请选择',
                            addClass: "float-right"
                        }}/>
                        <div className="line">-</div>
                        <DatePicker {...{
                            value: lf.utils.format(), name: "appointmentTime",placeholder:'请选择',
                            addClass: "float-right"
                        }}/>
                    </div>

                </div>

            )
        }
    })
    var TextInput = RC({
        componentDidMount(){
            if (lf.utils.getSys() == "IOS") {
                $('.me-info').eq(0).focus();
            }
        },
        componentDidUpdate(){
            if (lf.utils.getSys() == "IOS") {
                $('.me-info').focus();
            }
        },
        render: function () {
            var info = this.props.info;
            if (info.readonly == 'readonly' && !(info.val == '')) {
                var readonly = true
            }
            return (
                <div className="mui-input-row">
                    <label>{info.title}</label>
                    <input className="me-info" ref="inputText" id={info.name} readOnly={readonly}
                           placeholder={info.val}
                           type={info.type || 'text'}/>
                </div>
            )
        }
    });

    var InputContainer = RC({
        render: function () {
            var info = this.props.info;

            if (info.type == 'text') {
                var setInput = <TextInput info={info.info} ref="inputText"/>
            } else if (info.type == 'choose') {
                var setInput = <ChooseInput info={info.info} ref="choose"/>
            }else if (info.type == 'time'){
                var setInput = <Hours />
            }
            return (
                <div>
                    {setInput}
                </div>
            )
        }
    });

    var SetList = RC({
        setListData(){
            let isProperty = false;
            this.props.user.custLoginVo && this.props.user.custLoginVo.authModules.map((info, i)=> {
                if (info == 'property') {
                    isProperty = true;
                }
            })
            let showHouse = isProperty || !this.props.user.custLoginVo;

            return [
                {
                    type: TEXT,
                    info: {
                        val: this.state.name || ' ',
                        type: 'text',
                        name: 'name',
                        ref: 'name',
                        title: "店铺名称",
                    },
                },
                {
                    type: TEXT,
                    info: {
                        val: this.state.name || ' ',
                        type: 'text',
                        name: 'name',
                        ref: 'name',
                        title: "店铺介绍",
                    },
                },
                {
                    type: CHOOSE,
                    info: {
                        val: this.state.sex,
                        code: 'SEX',
                        name: 'sex',
                        ref: 'sex',
                        title: '送货小区'
                    },
                },
                {
                    type: TEXT,
                    info: {
                        val: this.state.name || ' ',
                        type: 'text',
                        name: 'name',
                        ref: 'name',
                        title: "起送金额",
                    },
                },
                {
                    type: TEXT,
                    info: {
                        val: this.state.name || ' ',
                        type: 'text',
                        name: 'name',
                        ref: 'name',
                        title: "配送时间",
                    },
                },
                {
                    type: TIME,
                    info: {
                        val: this.state.email || ' ',
                        type: 'email',
                        name: 'email',
                        ref: 'e-mail',
                        title: "营业时间",
                    },
                },
                {
                    type: TEXT,
                    info: {
                        val: this.state.mobile || ' ',
                        type: 'number',
                        name: 'phone',
                        ref: 'phone',
                        title: "电话",
                        readonly: 'readonly'
                    },

                },
                {
                    type: TEXT,
                    info: {
                        val: this.state.name || ' ',
                        type: 'text',
                        name: 'name',
                        ref: 'name',
                        title: "地址",
                    },
                },
                // {
                //     type: CHOOSE,
                //     info: {
                //         val: this.state.sex,
                //         code: 'SEX',
                //         name: 'sex',
                //         ref: 'sex',
                //         title: '性别'
                //     },
                // },
                // {
                //     type: CHOOSE,
                //     info: {
                //         val: this.state.maritalStatus,
                //         code: 'MARITAL_STATUS',
                //         name: 'marital',
                //         ref: 'marital',
                //         title: '婚姻状况'
                //     },
                // },
                // showHouse ?   /////////应该是后台拿到select option
                //     {
                //         type: TEXT,
                //         info: {
                //             val: this.state.projectName || ' ',
                //             type: 'text',
                //             name: 'community',
                //             ref: 'community',
                //             title: "送货小区",
                //             readonly: 'readonly'
                //         },
                //     } : '',
                //showHouse ?
                    // {
                    //     type: TEXT,
                    //     info: {
                    //         val: this.state.houseNum || ' ',
                    //         type: 'text',
                    //         name: 'homeNum',
                    //         ref: 'homeNum',
                    //         title: "房号",
                    //         readonly: 'readonly'
                    //     },
                    // } : ''
            ]
        },
        getInitialState() {
            return {
                portraitUrl: '',
                name: '',
                mobile: this.props.user.mobile ||
                (this.props.user.custLoginVo && this.props.user.custLoginVo.mobile),
                email: '',
                sex: '',
                maritalStatus: '',
                projectName: '',
                houseNum: '',
            }
        },
        componentWillMount: function () {
            var me = this,
                user = this.props.user;
            ajax({
                type: "get",
                url: prefix.basic + lf.finger.api.user.getCustByGlobalId,
                data: {
                    custGlobalId: user.globalId || (user.custLoginVo && user.custLoginVo.globalId)
                },
                success: function (data) {
                    console.log(data.data);
                    if (data.code == '200') {
                        var dt = data.data;
                        try {
                            me.getHouse(user, dt);
                        } catch (e) {
                            console.log(e);
                        }
                    } else {
                        alert(data.desc);
                    }
                }
            });
        },
        getHouse(user, dt){
            let me = this;
            if (user.globalId) {
                ajax({
                    data: {
                        globalId: user.globalId,
                    },
                    success: function (data) {
                        if (data.code == '200') {
                            var data = data.dataList;
                            for (var i = 0; i < data.length; i++) {
                                if (data[i].houseId == user.houseId) {
                                    me.setState({
                                        projectName: data[i].projectName,
                                        houseNum: data[i].houseNum,
                                        name: dt.nickName || dt.realName,
                                        email: dt.email,
                                        sex: dt.sex,
                                        maritalStatus: dt.maritalStatus,
                                        portraitUrl: dt.avatarUrl ||'../public/images/common/none.png',
                                    })
                                }
                            }
                        }
                        else {
                            alert(data.desc);
                        }
                    }
                }, lf.finger.api.household.getHouseList);
            } else {
                me.setState({
                    name: dt.nickName || dt.realName,
                    email: dt.email,
                    sex: dt.sex,
                    maritalStatus: dt.maritalStatus,
                    portraitUrl: dt.avatarUrl ||'../public/images/common/none.png',
                });
            }
        },
        update(){
            var me = this;
            var createReport = function (src) {
                console.log($('#name'))
                var updateData = {
                    custGlobalId: me.props.user.globalId || (me.props.user.custLoginVo && me.props.user.custLoginVo.globalId),
                    nickName: $('#name').val() || $('#name')[0].placeholder,
                    avatarUrl: src,
                    email: $('#email').val() || $('#email')[0].placeholder,
                    sex: $('#sex').val(),
                    maritalStatus: $('#marital').val()
                }
                ajax({
                    type: 'post',
                    url: prefix.basic + lf.finger.api.user.modifyCust,
                    data: updateData,
                    success: function (data) {
                        if (data.code == '200') {
                            setTimeout(function () { //避免与图片上传提示重叠
                                mui.toast('保存成功', ()=> {
                                    location.reload();
                                });
                            }, 300);
                        }
                        else {
                            console.log(data.desc);
                        }
                    }
                });
            };
            lf.bridgeJs.uploadImg(imgs.toString(), createReport);
        },
        render: function () {
            var info = this.setListData();
            var list = info.map(function (data, index) {
                return (
                    <InputContainer key={index} info={data} ref="inputCtr"/>
                )
            });
            return (
                <div>
                    <Portrait imgUrl={this.state.portraitUrl}/>
                    <form className="mui-input-group">
                        {list}
                    </form>
                    <div className="update-btn">
                        <button type="button" id="update" ref="update"
                                className="mui-btn mui-btn-primary mui-btn-block" onTouchEnd={this.update}>保存
                        </button>
                    </div>
                </div>
            )
        }
    });

    var Portrait = RC({
        componentWillMount(){//返回的是手机才能识别的图片地址
            lf.bridgeJs.registerHandler("getPhotoFromApp", function (data, cb) {
                $('#setPhoto').attr('src', data);
                imgs = data.toString();//上传图片时要用到
            });
        },
        clickFn(){
            selectPhoto(1);
        },
        render(){
            return (
                <div className="mui-table-view-cell portrait">
                    <span className="title">店铺头像</span>
                    <div className="mui-pull-right head-img">
                        <a href="javascript:;" ref="setPhoto" onTouchEnd={this.clickFn}>
                            <img className="mui-action-preview" id="setPhoto" src={this.props.imgUrl}/>
                        </a>
                    </div>
                </div>
            )
        }
    })

    var Container = RC({
        render: function () {//增加mask防止用户误按
            return (
                <div className="finger-me-profile">
                    <div className="mask"></div>
                    <SetList user={this.props.user}/>
                </div>
            )
        }
    });

    lf.bridgeJs.getUser(function (user) {
        console.log(user);
        r.render(
            <Container user={user}/>,
            document.getElementById('root'), function () {
                $('#root').css('background', 'none');
                $('.mask').hide(1000);
            }
        )
    })
})(liefeng, React);
